import {
   Row, Avatar,Card, Button,
  Alert, DatePicker, Divider, notification
} from 'antd';
import React from 'react';
import { connect } from 'dva';
import styles from './page.css'
import moment from 'moment';

class Sign extends React.Component {
  

  state = {
    changeTime:0 
  }

  componentDidMount(){
    this.getUserInfo()
  }

  getUserInfo = () => {
    const {dispatch} = this.props;

    console.log(this.state.changeTime,"=======");
    dispatch({
      type:'users/getUserInfo',
    
    })
  }

  handleSign = (e) => {
    const { dispatch } = this.props;
    const timeStamp = this.state.changeTime ? this.state.changeTime : Date.now()
    dispatch({
      type: 'users/sign',
      payload: { signTime: timeStamp.toString() }
    });
  }

  handleReset = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'users/reset',
    });
  }

  // const current

  render() {
    const {user={}} = this.props.users
    const { changeTime} = this.state;
    const { lastSignDate, continusDay, goldCount} = user;
    
    let signDesc;
    if (lastSignDate) {
      signDesc ='最近签到时间：'  + moment(lastSignDate).format('YYYY-MM-DD hh:mm:ss')
    }else {
      signDesc = '你还没有签到哦'
    }
    
    let changeDesc = ''
    if (changeTime) {
     changeDesc = 'web端时间被修改为:' +  moment(changeTime).format('YYYY-MM-DD hh:mm:ss')
    }

    let today = '';
    if (changeTime) {
      today= moment(changeTime).format('MM月DD日')
    } else {
      today = moment().format('MM月DD日')
    }

    const onOk =  (value)=> {
      let timeStamp = value.valueOf();
      console.log('Formatted Selected Time: ', timeStamp, value);
      this.setState({ changeTime: timeStamp})
    }


  



    return (
      <div style={{paddingTop:'40px'}}>
          <Row type="flex" justify="center">
          <Card
            title="签到领金币"
            style={{ width: 500 }}
          >
            <Alert message={signDesc} type="warning" />
          <div style={{paddingTop:'20px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div style={{display:'flex',alignItems:'center'}}> 
           <Avatar size={64} icon="user" />
                <div style={{ fontSize: '20px',paddingLeft:'20px'}}>你好,{user.username},今天是{today}</div>
          </div>
          <Button type='primary' onClick={this.handleSign}>签到</Button>
          </div>
            <div> 您已连续签到<span style={{ fontSize: '32px', color: 'red' }}>{continusDay}天</span></div>
            <div> 您的账户余额<span style={{ fontSize: '32px', color: 'red' }}>{goldCount}金币</span></div>
            <Divider></Divider>
            <div className='desc' style={{
              paddingTop:'20px',paddingBottom:'20px'}} >
              <div>1. 每次签到奖励100金币</div>
              <div>2. 连续签到在原来基础上多奖励20金币，如连续1天签到奖励20，连续2天奖励40，以此类推</div>
            </div>
            
            <Divider>测试:修改web端时间</Divider>
            <div style={{ display:'flex',flexDirection:'column',justifyContent:'space-between',alignItems:'center'}} >
            <DatePicker
              showTime
              placeholder="Select Time"
              onOk={onOk}
              showToday={false}
            />
            <div>{changeDesc}</div>
            </div>
            <div style={{
              display:'flex',
              justifyContent:'center',
              marginTop:'20px'
            }}>
              <Button  type='default' onClick={this.handleReset}>重置用户数据</Button>
            </div>
           
         </Card>
          </Row>
      </div>
    );
  }
}

const mapStateToProps = ({users}) => ({
  users
})

export default connect(mapStateToProps)(Sign);

